<template>
	<view class="suspersion">
		<view v-if="systemConfig.index_suspension_status == 1"
			class="suspersion-main container u-flex-column u-col-center u-flex-center" @click="suspersionClick"
			:style="{ transform: moveStyle, transition: moveTransition }">
			<img class="img" :src="systemConfig.index_suspension_img">
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				moveStyle: '', // 移动样式
				moveTransition: 'transform 1s ease', // 过渡效果
				halfButtonWidth: 46, // 悬浮按钮宽度的一半
				windowHeight: 1000,
			};
		},
		computed: {
			...mapState({
				systemConfig: state => state.init.systemConfig,
			}),
			isMoved() {
				return !!this.moveStyle; // 判断按钮是否已经移动
			}
		},
		props: {
			scrollTop: {
				type: Number || String,
				default: 0
			}
		},
		watch: {
			scrollTop(newVal) {
				if (this.systemConfig.index_suspension_status == 1) { // 检查状态是否为 1
					this.moveButton(newVal > this.windowHeight); // 根据滚动位置判断移动或重置按钮
				}
			},
		},
		methods: {
			moveButton(shouldMove) {
				this.moveStyle = shouldMove ? `translateX(${this.halfButtonWidth}px)` : ''; // 移动或重置按钮位置
			},
			suspersionClick() {
				if (this.isMoved) {
					this.moveButton(false); // 重置按钮位置
				} else {
					this.$emit('suspersionClick',this.systemConfig.index_suspension_url)
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.suspersion {
		position: relative;

		.suspersion-main {
			position: fixed;
			right: 28rpx;
			z-index: 999;
			bottom: 430rpx;
			transition: transform 1s ease; // 初始过渡效果

			.img {
				width: 128rpx;
				height: 128rpx;
			}
		}
	}
</style>